<template>
  <view class="login-container">
    <uni-icons type="contact-filled" size="100"></uni-icons>
    <button type="primary" class="btn-login" @click="getUserInfo">一键登录</button>
    <view class="tips-text">
      登录后尽享更多权益
    </view>
  </view>
</template>

<script>
  import {
    mapMutations,
    mapState
  } from 'vuex'
  export default {
    name: "my-login",
    data() {
      return {

      };
    },
    computed: {
      // 调用 mapState 辅助方法，把 m_user 模块中的数据映射到当前用组件中使用
      ...mapState('m_user', ['redirectInfo'])
    },
    methods: {
      // 调用 mapMutations 辅助方法，把 m_user 模块中的方法映射到当前组件中使用
      ...mapMutations('m_user', ['updateUserInfo', 'setToken', 'updateRedirectInfo']),
      // 获取用户基本信息
      getUserInfo() {
        let _this = this;
        // 获取用户信息。每次请求都会弹出授权窗口，用户同意后返回 userInfo。
        uni.getUserProfile({
          desc: '获取你的昵称、头像、地区及性别',
          success(res) {
            // 成功后更新用户信息
            _this.updateUserInfo(res.userInfo)
            _this.getToken(res)
          },
          // 成功后提示用户取消授权
          fail(err) {
            if (err.errMsg === 'getUserProfile:fail auth deny') {
              return uni.$showMsg('您取消了登录授权')
            }
          }
        })
      },
      getToken(info) {
        this.setToken('aasdasdas1231324') //由于接口废弃 自定义一个token内容
        this.navigateBack();
      },
      navigateBack() {
        // 判断 vuex 中的 redirectInfo 是否为 null
        // 如果不为 null，则登录成功之后，需要重新导航到对应的页面
        if (this.redirectInfo && this.redirectInfo.openType === 'switchTab') {
          // 调用小程序的uni.switchTab()进行页面导航
          uni.switchTab({
            url: this.redirectInfo.from,
            // 导航成功之后,把vuex中的 redirectInfo 对象重置为null
            complete: () => {
              this.updateRedirectInfo(null)
            }
          })
        }
      }


    }
  }
</script>

<style lang="scss">
  .login-container {
    height: 750rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #F8F8F8;
    position: relative;

    &::after {
      content: ' ';
      width: 100%;
      height: 40px;
      background-color: red;
      border-radius: 100%;
      position: absolute;
      left: 0;
      bottom: 0;
      background-color: white;
      transform: translateY(50%);
    }

    .btn-login {
      width: 90%;
      border-radius: 100px;
      background-color: #C00000;
      margin: 15px 0;
    }

    .tips-text {
      font-size: 12px;
      color: gray;
    }
  }
</style>
